<script setup>
const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
  options: { type: Object, default: () => ({}) },
  isLook: Boolean,
})

const emit = defineEmits(['update:modelValue'])
const form = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})
const typeChange = val => {
  form.value.sku.forEach(d => {
    d.platform = val === 2 ? 1 : undefined
  })
}
</script>

<template>
  <div class="w-full">
    <div class="v-title mb-3">基础信息</div>
    <div class="grid gap-x-3 gap-y-1" :style="{ gridTemplateColumns: `repeat(${isLook ? 5 : 5}, minmax(0, 1fr))`, marginBottom: isLook ? '10px' : '0' }">
      <VText v-if="isLook" title="备库需求单号" :value="form.basic.demand_no"></VText>
      <el-form-item v-else class="mb-2" label="备库需求单号">
        <el-input v-model="form.basic.demand_no" disabled />
      </el-form-item>
      <VText v-if="isLook" title="申请人员" :value="form.basic.create_user"></VText>
      <el-form-item v-else class="mb-2" label="申请人员">
        <VCascader v-model="form.basic.create_user_id" placeholder="请选择" filterable clearable disabled class="w-full" />
      </el-form-item>
      <VText v-if="isLook" title="申请时间" :value="form.basic.create_time"></VText>
      <el-form-item v-else class="mb-2" label="申请时间">
        <el-input v-model="form.basic.create_time" disabled />
      </el-form-item>
      <VText v-if="isLook" title="申请部门" :value="form.basic.department_name"></VText>
      <el-form-item v-else class="mb-2" label="申请部门">
        <el-input v-model="form.basic.department_name" placeholder="请输入" disabled class="w-full" />
      </el-form-item>
      <VText v-if="isLook" title="开发部门" :value="form.basic.develop_department_name"></VText>
      <el-form-item v-else class="mb-2" label="开发部门">
        <el-input v-model="form.basic.develop_department_name" placeholder="请输入" disabled class="w-full" />
      </el-form-item>
      <VText v-if="isLook" title="备库需求类型" :value="form.basic.demand_type_name"></VText>
      <el-form-item v-else class="mb-2" label="备库需求类型" prop="basic.demand_type"
        :rules="[{ required: !isLook, message: '不能为空', trigger: 'change' }]">
        <VSelect v-model="form.basic.demand_type" :options="options.demand_type || []" placeholder="请输入"
          :clearable="false" class="w-full" @change="typeChange" />
      </el-form-item>
      <VText v-if="isLook" title="审核状态" :value="form.basic.demand_status_name"></VText>
      <el-form-item v-else class="mb-2" label="审核状态">
        <VSelect v-model="form.basic.demand_status" placeholder="请选择" :options="options.demand_status" filterable
          clearable disabled class="w-full" />
      </el-form-item>
      <VText v-if="isLook" title="飞书审核" :value="form.basic.is_feishu_audit_name"></VText>
      <el-form-item v-else class="mb-2" label="飞书审核">
        <div class="flex items-center gap-3">
          <el-switch v-model="form.basic.is_feishu_audit" inline-prompt active-text="是" inactive-text="否"
            :active-value="2" :inactive-value="1" />
          <div class="text-green-600 text-xs">提示：启用后只能在飞书审核</div>
        </div>
      </el-form-item>
      <VText v-if="isLook" title="备注" :value="form.basic.remark"></VText>
      <el-form-item v-else class="mb-2 col-span-3" label="备注">
        <el-input v-model="form.basic.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"></el-input>
      </el-form-item>
    </div>
  </div>
</template>